<script setup lang="ts">
import {onMounted, reactive} from 'vue'
import {fetchRole} from "@/service/api/template";

export interface RoleTagProps {
  code: string
  type?: 'success' | 'info' | 'warning' | 'danger'
  closable?: boolean
}

const $props = withDefaults(defineProps<RoleTagProps>(), {
  closable: false,
  type: 'info'
})
const $emits = defineEmits<{
  (e: 'close', code: string): void
}>()


let roleInfo = reactive<Api.Entity.Role>({
  code: "",
  desc: "",
  id: null,
  name: ""
})
onMounted(() => {
  if (!$props.code) {
    throw new Error('code is required')
  }
  fetchRole({
    code: $props.code
  }).then((res) => {
    if (!res.error) {
      roleInfo.id = res.data.id
      roleInfo.name = res.data.name
      roleInfo.code = res.data.code
      roleInfo.desc = res.data.desc
    }
  })
})
const onClose = () => {
  $emits('close', $props.code)
}
</script>
<template>
  <el-tag round :closable="$props.closable" :type="type" effect="light" @close="onClose">
    <div class="flex-center" style="gap: 4px; grid-gap: 4px">
      <span>{{ roleInfo.name || code }}</span>
    </div>
  </el-tag>
</template>

<style scoped lang="scss">
:deep {
  .el-tag__content:only-child {
    margin-right: 4px;
  }
}
</style>
